import React from "react";
import {SafeAreaView, ScrollView, Text, TextInput, View, Keyboard, Dimensions, TouchableOpacity} from "react-native";
import Button from "react-native-button";
import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';

import {Icon} from "../../components/AroIconfont";
import {colors} from "../../styles";
import styles from "./style";

const {width, height} = Dimensions.get('window');

const MainContentView = (self) => (
  <SafeAreaView style={styles.safeAreaContainer}>
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <Text
            onPress={() => {
              self.props.navigation.setParams({tabBarVisible: false});
              this.drawer.openDrawer();
              Keyboard.dismiss()
            }}
          >
            <Icon name={'aroIcon|iconunfold'} size={20} color={'#354B5B'}/>
          </Text>
        </View>
        <View style={styles.headerCenter}>
          <Text style={styles.headerCenterText}>ETH/ZC</Text>
        </View>
        <View style={styles.headerRight}>
          <Text style={styles.headerRightLayout}>
            <Icon name={'aroIcon|iconkline'} size={20} color={'#354B5B'}/>
          </Text>
          <Text style={styles.headerRightLayout}>
            <Icon name={'aroIcon|iconcollect_o'} size={20} color={'#354B5B'}/>
          </Text>
        </View>
      </View>
      <ScrollView style={styles.scrollContainer} keyboardDismissMode='on-drag'>
        <View style={styles.tradeTopContainer}>
          <View style={styles.tradeTopInner}>

            <View style={styles.tradeTopLeft}>

              <View style={styles.topLeftSwitch}>
                <View style={styles.leftSwitchButton}>
                  <Text style={styles.switchButtonText}>买入</Text>
                </View>
                <View style={styles.rightSwitchButton}>
                  <Text style={styles.switchButtonText}>卖出</Text>
                </View>
              </View>

              <Text style={styles.priceLimitText}>限价</Text>

              <View style={styles.inputWrap}>
                <TextInput
                  style={styles.inputItem}
                  placeholderTextColor={colors.placeholderTextGray}
                  placeholder='价格'
                  keyboardType='number-pad'
                />
                <Text style={styles.inputItemRightText}>ZC</Text>
              </View>

              <Text style={styles.transformCNYText}>≈ 0.00 CNY</Text>

              <View style={styles.inputWrap}>
                <TextInput
                  style={styles.inputItem}
                  placeholderTextColor={colors.placeholderTextGray}
                  placeholder='数量'
                  keyboardType='number-pad'
                />
                <Text style={styles.inputItemRightText}>ZZEXC</Text>
              </View>

              <View style={styles.volumeContainer}>
                <View style={styles.volumeItem}>
                  <Text style={styles.volumeItemText}>25%</Text>
                </View>
                <View style={styles.volumeItem}>
                  <Text style={styles.volumeItemText}>50%</Text>
                </View>
                <View style={styles.volumeItem}>
                  <Text style={styles.volumeItemText}>75%</Text>
                </View>
                <View style={styles.volumeItem}>
                  <Text style={styles.volumeItemText}>100%</Text>
                </View>
              </View>

              <View style={styles.summaryWrap}>
                <View>
                  <Text style={styles.summaryTextLeft}>可用</Text>
                </View>
                <View>
                  <Text style={styles.summaryTextRight}>0.00 ZC</Text>
                </View>
              </View>
              <View style={styles.summaryWrap}>
                <View>
                  <Text style={styles.summaryTextLeft}>总额</Text>
                </View>
                <View>
                  <Text style={styles.summaryTextRight}>0.00 ZC</Text>
                </View>
              </View>
              <View style={styles.buttonWrap}>
                <Button style={styles.buttonItem} containerStyle={styles.buttonPlugIn}>
                  买入 ETH
                </Button>
              </View>
            </View>

            <View style={styles.tradeTopRight}>

              <View style={styles.topRightHeader}>
                <Text style={styles.rightHeaderText1}>盘口</Text>
                <Text style={styles.rightHeaderText2}>价格</Text>
                <Text style={styles.rightHeaderText3}>数量</Text>
              </View>

              <View style={styles.listWrap}>


                <View>
                  <View style={styles.listItem}>
                    <Text style={styles.listItemText1}>1</Text>
                    <Text style={{...styles.listItemText2, color: colors.fallRed}}>3545.23</Text>
                    <Text style={styles.listItemText3}>1.023</Text>
                  </View>
                  <View style={{backgroundColor: 'lightpink', width: width * 0.4 * 0.6, position: 'absolute', right: 0, top: 0, bottom: 0,}} />
                </View>


              </View>

              <View style={styles.priceShowWrap}>
                <Text style={styles.priceShowText1}>362223.02</Text>
                <Text style={styles.priceShowText2}>≈ 365.23 CNY</Text>
              </View>

              <View style={styles.listWrap}>
                <View style={styles.listItem}>
                  <Text style={styles.listItemText1}>1</Text>
                  <Text style={{...styles.listItemText2, color: colors.riseGreen}}>3545.23</Text>
                  <Text style={styles.listItemText3}>1.023</Text>
                </View>
              </View>

            </View>

          </View>
        </View>
        <View style={styles.tradeBottomContainer}>
          <View>
            <View style={styles.bottomHeader}>
              <View>
                <Text style={styles.bottomHeaderLeftText}>当前委托</Text>
              </View>
              <View style={styles.bottomHeaderRight}>
                <Text style={styles.headerRightText1}>
                  <Icon name={'aroIcon|iconlist'} size={16} color={colors.lightTextGray}/>
                </Text>
                <Text style={styles.headerRightText2}>
                  全部
                </Text>
              </View>
            </View>
            <View style={styles.bottomListWrap}>

              <View style={styles.bottomList}>
                <View style={styles.listTop}>
                  <View style={styles.listTopLeft}>
                    <Text style={styles.listTopLeftText1}>卖出</Text>
                    <Text style={styles.listTopLeftText2}>4/26 02:22</Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => alert('ok')}
                    style={styles.listTopRight}
                  >
                    <Text style={styles.listTopRightText}>撤销</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.listBottom}>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText11}>价格(PC)</Text>
                    <Text style={styles.listBottomItemText21}>2532.2</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText12}>数量(BTC)</Text>
                    <Text style={styles.listBottomItemText22}>0.223</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText13}>实际成交(PC)</Text>
                    <Text style={styles.listBottomItemText23}>0.005</Text>
                  </View>
                </View>
              </View>

              <View style={styles.bottomList}>
                <View style={styles.listTop}>
                  <View style={styles.listTopLeft}>
                    <Text style={styles.listTopLeftText1}>卖出</Text>
                    <Text style={styles.listTopLeftText2}>4/26 02:22</Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => alert('ok')}
                    style={styles.listTopRight}
                  >
                    <Text style={styles.listTopRightText}>撤销</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.listBottom}>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText11}>价格(PC)</Text>
                    <Text style={styles.listBottomItemText21}>2532.2</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText12}>数量(BTC)</Text>
                    <Text style={styles.listBottomItemText22}>0.223</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText13}>实际成交(PC)</Text>
                    <Text style={styles.listBottomItemText23}>0.005</Text>
                  </View>
                </View>
              </View>

              <View style={styles.bottomList}>
                <View style={styles.listTop}>
                  <View style={styles.listTopLeft}>
                    <Text style={styles.listTopLeftText1}>卖出</Text>
                    <Text style={styles.listTopLeftText2}>4/26 02:22</Text>
                  </View>
                  <TouchableOpacity
                    onPress={() => alert('ok')}
                    style={styles.listTopRight}
                  >
                    <Text style={styles.listTopRightText}>撤销</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.listBottom}>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText11}>价格(PC)</Text>
                    <Text style={styles.listBottomItemText21}>2532.2</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText12}>数量(BTC)</Text>
                    <Text style={styles.listBottomItemText22}>0.223</Text>
                  </View>
                  <View style={styles.listBottomItem}>
                    <Text style={styles.listBottomItemText13}>实际成交(PC)</Text>
                    <Text style={styles.listBottomItemText23}>0.005</Text>
                  </View>
                </View>
              </View>

            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  </SafeAreaView>
);


const SideContentView = (self) => (
  <SafeAreaView style={{flex: 1, backgroundColor: '#999'}}>
    <View>
      <Text>币币</Text>
    </View>

  </SafeAreaView>
);


// self.props.navigation.setParams({tabBarVisible: true});
// this.drawer.closeDrawer();

export default (self) => (
  <DrawerLayout
    ref={drawer => this.drawer = drawer}
    drawerPosition={DrawerLayout.positions.Left}
    drawerType='back'
    renderNavigationView={() => SideContentView(self)}
    drawerLockMode='locked-closed'
    drawerWidth={width * 0.75}
    onDrawerClose={() => self.props.navigation.setParams({tabBarVisible: true})}
  >
    {MainContentView(self)}
  </DrawerLayout>
);